<template>
  <div class="box">
    <div class="header">
      <router-link to="/media"
        ><i class="el-icon-camera" style="font-size: 33px; margin: 15px"></i
      ></router-link>
    </div>
    <div class="photo">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8082/image/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        name="fileName"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <!-- <div class="infomation">
      <div class="information-detail">
        <span>名称</span><el-input v-model="input" placeholder="Please input" />
      </div>
      <div class="information-detail">
        <span>心情</span><el-input v-model="input" placeholder="Please input" />
      </div>
      <div class="information-detail">
        <span>事件</span
        ><el-input
          v-model="input"
          placeholder="Please input"
          type="textarea"
          :rows="4"
        />
      </div>
      <div style="display: flex; flex-direction: row-reverse">
        <el-button
          type="primary"
          style="width: 10px; min-height: 20px"
        ></el-button>
      </div>
    </div> -->
    <div class="infomation">
      <div class="information-detail">
        <span>结果</span
        ><el-input
          v-model="input"
          placeholder="Please input"
          type="textarea"
          :rows="4"
        />
      </div>
    </div>
    <div style="margin-left: 25px">
      <el-tag
        v-for="tag in tags"
        :key="tag.name"
        closable
        :type="tag.type"
        style="margin: 5px"
      >
        {{ tag.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      imageUrl: "",
    };
  },

  methods: {
    handleAvatarSuccess(res, file) {
      if (res.code === "200") {
        this.imageUrl = URL.createObjectURL(file.raw);
        ElMessage("上传成功");
      } else {
        ElMessage("上传失败");
      }
    },
  },

  setup() {
    let tags = reactive([
      { name: "Tag 1", type: "" },
      { name: "Tag 2", type: "success" },
      { name: "Tag 3", type: "info" },
      { name: "Tag 4", type: "warning" },
    ]);
    function beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        ElMessage("上传图片必须为jpg格式");
      }
      if (!isLt2M) {
        ElMessage("上传图片大小不超过2MB");
      }
      return isJPG && isLt2M;
    }
    return {
      tags,
      beforeAvatarUpload,
    };
  },

  mounted() {},
};
</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  margin-bottom: 70px;
}
.header {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}
.photo {
  margin: 10px auto;
  height: 178px;
  width: 278px;
  border: 1px dashed black;
  border-radius: 6px;
}
.avatar-uploader .el-upload {
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 278px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 278px;
  height: 178px;
  display: block;
}
.infomation {
  display: flex;
  flex-direction: column;
  padding: 30px;
  padding-bottom: 5px;
}
.information-detail {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}
</style>
